import React from 'react';
import { ActivityIndicator, FlatList, StyleSheet, Text, View } from 'react-native';
import { useViewport } from 'stream-chat-react-native';

import { UserGridItem } from './UserGridItem';

import { EmptySearchState } from '../../icons/EmptySearchState';

import type { UserResponse } from 'stream-chat';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 20,
  },
  contentContainer: { flexGrow: 1 },
  emptyResultIndicator: {
    alignItems: 'center',
    height: 300,
    justifyContent: 'center',
  },
  flex: { flex: 1 },
  userGridItemContainer: {
    paddingBottom: 10,
    width: 64,
  },
});

type UserSearchResultsGridProps = {
  onPress: (user: UserResponse) => void;
  results: UserResponse[];
  gridSize?: number;
  loading?: boolean;
  loadMore?: () => void;
  searchText?: string;
  showOnlineStatus?: boolean;
};

export const UserSearchResultsGrid: React.FC<UserSearchResultsGridProps> = ({
  gridSize = 4,
  loading = false,
  loadMore = () => null,
  onPress,
  results,
  searchText,
}) => {
  const { vw } = useViewport();
  const totalUserSpace = vw(100) - 56; // 36 = outside margin 8 * 2 + inner padding 20 * 2;

  return (
    <View style={styles.container}>
      {loading && results.length === 0 && searchText === '' ? (
        <ActivityIndicator size='small' />
      ) : (
        <FlatList
          contentContainerStyle={styles.contentContainer}
          data={results}
          keyboardDismissMode='interactive'
          keyboardShouldPersistTaps='handled'
          keyExtractor={(item, index) => `${item.id}-${index}`}
          // eslint-disable-next-line react/no-unstable-nested-components
          ListEmptyComponent={() => (
            <View style={styles.emptyResultIndicator}>
              <EmptySearchState height={124} width={124} />
              <Text>No user matches these keywords</Text>
              <Text>{loading ? 'true' : 'false'}</Text>
              <Text>{results.length}</Text>
            </View>
          )}
          numColumns={gridSize}
          onEndReached={loadMore}
          renderItem={({ index, item: user }) => (
            <View
              style={[
                styles.userGridItemContainer,
                {
                  marginLeft: index % gridSize !== 0 ? (totalUserSpace - 64 * gridSize) / 3 : 0,
                },
              ]}
            >
              <UserGridItem
                onPress={() => {
                  onPress(user);
                }}
                removeButton={false}
                user={user}
              />
            </View>
          )}
          showsVerticalScrollIndicator={false}
          style={styles.flex}
        />
      )}
    </View>
  );
};
